import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {AtForm, AtInput, AtList, AtListItem} from "taro-ui";
import {Picker, View} from '@tarojs/components'
import GzhAuth from "../../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../../utils/tools";
import {INVOICE_DETAIL, INVOICE_SAVE} from "../../../constants/api";
import {http} from "../../../utils/http";
import './list.scss'

interface StateType {
  info: any
  headType: any
}

export default class ManageAppointment extends Component {
  state: StateType = {
    info: {
      supplier_id: '',
      invoicetitle_type: '',
      invoicetitle_name: '',
      unit_id_number: '',
      remark: '',
      address: '',
      phone: '',
      bank: '',
      bank_account: ''
    },
    headType: [{label: '个人', value: 0}, {label: '企业', value: 1}]
  }

  async componentDidShow() {
    vcmonitor(this)
    this.id = this.params.id || ''
    let {info} = this.state
    if (this.id) {
      const data = await http.HGet(INVOICE_DETAIL, {id: this.id})
      info = this.jiaoji(info, data.data)
      info.invoicetitle_type = info.invoicetitle_type === 0 ? '个人' : '企业'
    }
    info['supplier_id'] = this.params.supplierId || ''
    this.setState({info})
  }

  id
  params = Taro.getCurrentInstance().router.params

  jiaoji(a, b) {
    const c = {}
    for (const item in a) {
      if (b[item] !== undefined && b[item] !== null) {
        c[item] = b[item]
      } else {
        c[item] = a[item]
      }
    }
    return c
  }

  async confirmRequest() {
    const params = Object.assign({}, this.state.info)
    params.invoicetitle_type = params.invoicetitle_type === '个人' ? 0 : 1
    const res = await http.HPost(INVOICE_SAVE, params)
    if (res) {
      Taro.showToast({title: '保存成功', duration: 2000})
      setTimeout(() => {
        Taro.navigateBack({delta: 1})
      }, 2000)
    }
  }

  handleChange(field, val) {
    const {info} = this.state
    if (field === 'invoicetitle_type') {
      info[field] = val.detail.value == 1 ? '企业' : '个人'
    } else {
      info[field] = val
    }
    this.setState({info})
  }

  render() {
    const {info, headType} = this.state
    return (
      <View className='Invoice-Information title'>
        <GzhAuth />
        <AtForm>
          <Picker disabled mode='selector' className='no-after' range={['普通发票']}>
            <AtList><AtListItem title='发票类型' extraText='普通发票' /></AtList>
          </Picker>
          <Picker disabled={!!this.id} mode='selector' rangeKey='label' value='value' range={headType}
            onChange={this.handleChange.bind(this, 'invoicetitle_type')}
          >
            <AtList><AtListItem title='抬头类型'
              extraText={`${info.invoicetitle_type ? info.invoicetitle_type : '请选择抬头类型'}`}
            /></AtList>
          </Picker>
          <AtInput
            disabled={!!this.id}
            name='invoicetitle_name'
            title='抬头名称'
            type='text'
            placeholder='请输入抬头名称'
            value={info.invoicetitle_name}
            onChange={this.handleChange.bind(this, 'invoicetitle_name')}
          />
          {(info.invoicetitle_type === '企业') && <View>
            <AtInput
              disabled={!!this.id}
              name='unit_id_number'
              title='单位税号'
              type='text'
              placeholder='请输入单位税号'
              value={info.unit_id_number}
              onChange={this.handleChange.bind(this, 'unit_id_number')}
            />
            <AtInput
              disabled={!!this.id}
              name='address'
              title='注册地址'
              type='text'
              placeholder='选填'
              value={info.address}
              onChange={this.handleChange.bind(this, 'address')}
            />
            <AtInput
              disabled={!!this.id}
              name='phone'
              title='注册电话'
              type='text'
              placeholder='选填'
              value={info.phone}
              onChange={this.handleChange.bind(this, 'phone')}
            />
            <AtInput
              disabled={!!this.id}
              name='bank'
              title='开户银行'
              type='text'
              placeholder='选填'
              value={info.bank}
              onChange={this.handleChange.bind(this, 'bank')}
            />
            <AtInput
              disabled={!!this.id}
              name='bank_account'
              title='银行账号'
              type='text'
              placeholder='选填'
              value={info.bank_account}
              onChange={this.handleChange.bind(this, 'bank_account')}
            />
          </View>}
          <AtInput
            className='no-after'
            disabled={!!this.id}
            name='remark'
            title='备注'
            type='text'
            placeholder='选填'
            value={info.remark}
            onChange={this.handleChange.bind(this, 'remark')}
          />
        </AtForm>
        {!this.id && <View className='confirm-invoice' onClick={this.confirmRequest.bind(this)}>申请发票</View>}
      </View>
    )
  }
}
